<template>
  <div class="page">
      <nav-header></nav-header>
      <div class="goods-sale" style="margin-top: 14px;">
      <goods-box :goodsItems="productList" ></goods-box>    
  </div>
  <nav-footer></nav-footer>
  </div>

</template>
<script>
  import NavHeader from './../components/NavHeader'
  import NavFooter from './../components/NavFooter'
  import {search} from './../service/good'  
  import GoodsBox from './../components/index/GoodsBox' 

  export default{
    name: 'searchResult',
    components:{
      NavHeader,
      NavFooter,
      GoodsBox
    },
    data(){
      return {
        keywords :this.$route.params.keywords,
        goodsCategoryId :this.$route.params.goodsCategoryId,
        params: this.$route.params,
        productList:[]
      }
    },
    mounted(){
      this.init();
    },
    methods:{
      async init(){
        const {data} =await search({keyword:this.keywords,goodsCategoryId:this.goodsCategoryId});
        this.productList=data.list;
      },
    },
    watch:{
      $route:{
        handler(val,oldval){
          // console.log(val);//新路由信息
          // console.log(oldval);//老路由信息
          this.keywords=val.params.keywords;
          this.init();
          },
        // 深度观察监听
        deep: true
      }
    }
  }

    

</script>
<style lang="less">
  .page {
    .gray-page {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      background-color: #f5f5f5;
    };
    .goods-sale {
      position: relative;
      
    text-align: center;
      width: 1226px;
      height: auto;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
  }
  .goods-sale *{    box-sizing: border-box;}
  }

</style>